<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .big{
            font-size: 30px;
        }
        .noline{
            text-decoration: none;
        }
    </style>
    <script src="../JS/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $div = $('#div01');
            var $div2 = $('div');
            var $a = $('#link01');

            // 读取样式属性
            var sSize = $div.css('font-size');

            alert(sSize);

            // 写样式属性  也叫设置属性
            // 设置一个样式属性可以不写成字典的形式
            $div.css('color', 'red');

            $div.css({'font-size': 30, 'font-weight': 'bold'});

            // 读取多个元素的样式属性值
            var sSize2 = $div2.css('font-size');
            alert(sSize2);

            // 操作样式类名
            $a.addClass('red');
            $a.addClass('big');
            $a.addClass('noline');

            $a.removeClass('red');
        })
    </script>
</head>
<body>
    <div id="div01">
        DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
    </div>
    <div>
        IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
    </div>
    <div>
        VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
    </div>
    <a href="#" id="link01">
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    </a>
</body>
</html>